<template>
	<view class="container">
		<view class="tui-wallet__box">
			<!-- {{contentDetail}} -->
			<view class="" style="display: flex;margin-top: 50rpx;">
				<image :src="info.app.cdnurl+userInfos.avatar" mode="widthFix"
					style="width: 100rpx;border-radius: 50%;"></image>
				<view class=""
					style="margin-left: 20rpx;display: flex;flex-direction: column;justify-content: space-around;">
					<view class="" style="color: #000;font-weight: bold;font-size: 32rpx;">{{ userInfos.nickname }}
					</view>
					<view class="" style="width: 100%;">
						<text class=""
							style="font-size: 26rpx;background: #ff6000;color: #fff;border-radius: 20rpx;width: auto;padding: 3rpx 12rpx;"
							v-if="contentDetail.level_info && contentDetail.level_info.name">{{ contentDetail.level_info.name }}</text>
					</view>
				</view>
			</view>
			<view class="tui-content__box tn-margin-top-sm">
				<view class=""
					style="padding: 0rpx 30rpx;display: flex;justify-content: space-between;align-items: center;box-shadow: 0px 2px 6px #ffefd6;">
					<view class="tui-my__assets">
						<text style="margin-right: 10rpx;">账号信息</text>
						<text :class="isShow?'tn-icon-eye-fill':'tn-icon-eye-close'" @tap="toggle"></text>
					</view>
					<view class="tui-my__assets" @click="commission">
						<text>查看明细</text>
						<text class="tn-icon-right-triangle"></text>
					</view>
				</view>
				<view class="tui-assets__center">
					<view class="tui-item__box">
						<text>总收益(元)</text>
						<view class="tn-padding-xs" style="color: #666666;" v-if="isShow">￥<text
								class="tui-text__large">{{ contentDetail.total_income || 0 }}</text></view>
						<view class="tn-padding-xs" style="color: #666666;" v-else><text
								class="tui-text__large">****</text></view>
					</view>
					<view class="tui-item__box">
						<text>我的佣金(元)</text>
						<view class="tn-padding-xs" style="color: #666666;" v-if="isShow">￥<text
								class="tui-text__large">{{ userInfos.commission || 0 }}</text></view>
						<view class="tn-padding-xs" style="color: #666666;" v-else><text
								class="tui-text__large">****</text></view>
					</view>
					<view class="tui-item__box" @tap="bankCard">
						<text>我的消费(元)</text>
						<view class="tn-padding-xs" style="color: #666666;" v-if="isShow">￥<text
								class="tui-text__large">{{ userInfos.total_consume || 0 }}</text></view>
						<view class="tn-padding-xs" style="color: #666666;" v-else><text
								class="tui-text__large">****</text></view>
					</view>
				</view>
			</view>
			<view class="tui-content__box tn-margin-top-sm">
				<view class="header"
					style="padding: 0rpx 30rpx;display: flex;justify-content: space-between;align-items: center;">
					<view class="tui-my__assets" style="color: #fff;">
						<text>功能专区></text>
					</view>
				</view>
				<tn-grid align="left" :col="col" style="padding: 30rpx 0;">
					<block v-for="(item, index) in listMenu" :key="index">
						<!-- H5 -->
						<!-- #ifndef MP-WEIXIN -->
						<tn-grid-item style="background: none;">
							<view style="padding: 20rpx 0;text-align: center;" @click="goTo(item)">
								<image :src="item.url" mode="widthFix" style="width: 70rpx;"></image>
								<view class="" style="font-size: 28rpx;">{{ item.title }}</view>
							</view>
						</tn-grid-item>
						<!-- #endif-->

						<!-- 微信小程序 -->
						<!-- #ifdef MP-WEIXIN -->
						<!-- 		<tn-grid-item  class="backgroudff" :style="{width: gridItemWidth}">
							<view style="padding: 20rpx 0;text-align: center;background: none;"
								@click="goTo(item)">
								<image :src="item.url" mode="widthFix" style="width: 70rpx;"></image>
								<view class="" style="font-size: 28rpx;">{{ item.title }}</view>
							</view>
						</tn-grid-item> -->

						<tn-grid-item :style="{width: gridItemWidth}">
							<view style="padding: 20rpx 0;text-align: center;" @click="goTo(item)">
								<image :src="item.url" mode="widthFix" style="width: 70rpx;"></image>
								<view class="" style="font-size: 28rpx;">{{ item.title }}</view>
							</view>
						</tn-grid-item>
						<!-- #endif-->
					</block>
				</tn-grid>
			</view>
			<view class="tui-content__box tn-margin-top-sm" style="min-height: 500rpx;">
				<view class="header"
					style="padding: 0rpx 30rpx;display: flex;justify-content: space-between;align-items: center;">
					<view class="tui-my__assets" style="color: #fff;">
						<text>实时动态></text>
					</view>

				</view>
				<view class="" style="padding: 10rpx 20rpx;">
					<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" style="height:400rpx;">
						<view class=""
							style="display: flex;justify-content: space-between;padding: 10rpx 0;font-size: 24rpx;align-items: center;"
							v-for="(item,index) in dataList.data" :key="index">
							<view class="" style="display: flex;align-items: center;">
								<tn-avatar v-if="item.oper.avatar" size="sm" :src="info.app.cdnurl+item.oper.avatar"
									style="margin-right: 10rpx;"></tn-avatar>
								<image v-else src="../../static/notice.png" mode="widthFix" style="width: 50rpx;">
								</image>
								<view class="" style="width: 450rpx;margin-left: 10rpx;">{{ item.remark }}</view>
							</view>
							<view class="" style="color: #c4c4c4;font-size: 26rpx;">{{timeDescription(item.createtime)}}
							</view>
						</view>

						<tn-load-more class="tn-margin-top" status="已经没有了啊"
							fontColor="rgba(255, 129, 129, 0.8)"></tn-load-more>
					</scroll-view>



				</view>

			</view>
		</view>
		<tn-popup v-model="showPopup" mode="center" width="90%" :borderRadius="20" :maskCloseable="false">
			<view class=""
				style="padding: 100rpx 50rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<image src="https://oss.taoding1688.com/static/uniapp/static/commission/apply.png" mode="widthFix"
					style="width: 200rpx;"></image>
				<view class="" style="margin-top: 30rpx;font-weight: bold;font-size: 36rpx;">待完善信息</view>
				<view class="" style="margin-top: 30rpx;font-size: 28rpx;color: #999999;">请补充您的信息后提交审核</view>
				<tn-button backgroundColor="#e9b461" fontColor="#fff" style="margin-top: 30rpx;padding: 0 180rpx;"
					shape='round' @click="perfect">完善信息</tn-button>
				<view class="" style="margin-top: 30rpx;color: rgba(233, 180, 97, 0.6);font-size: 30rpx;" @click="back">
					返回</view>
			</view>

		</tn-popup>

		<tn-popup v-model="show" mode="bottom" :borderRadius="20">
			<view class="" style="padding: 50rpx 0 0 0;">
				<view
					style="display: flex;justify-content: space-around;border-bottom: 1rpx solid #e7e7e7;padding-bottom: 20rpx;">
					<button open-type="share" class=""
						style="display: flex;flex-direction: column;align-items: center;width: 50%;background: none;"
						@click="onShareByForward" v-if="info.platform.share.methods.includes('forward')">
						<image src="../../static/share_wx.png" mode="widthFix" style="width: 80rpx;"></image>
						<view class="" style="margin-top: 10rpx;font-size: 26rpx;color: #666666;">微信好友
						</view>
					</button>
					<view class="" style="display: flex;flex-direction: column;align-items: center;width: 50%;"
						@click="copy" v-if="info.platform.share.methods.includes('link')">
						<image src="../../static/share_link.png" mode="widthFix" style="width: 80rpx;"></image>
						<view class="" style="margin-top: 10rpx;font-size: 26rpx;color: #666666;">复制链接
						</view>
					</view>
					<view class="" style="display: flex;flex-direction: column;align-items: center;width: 50%;"
						v-if="info.platform.share.methods.includes('poster')" @click="createsShareImage">
						<image src="../../static/share_poster.png" mode="widthFix" style="width: 80rpx;"></image>
						<view class="" style="margin-top: 10rpx;font-size: 26rpx;color: #666666;">生成海报</view>
					</view>
				</view>
				<view class="" style="text-align: center;color: #bbbbbb;font-size: 28rpx;padding: 20rpx 0;"
					@click="show=false">取消</view>
			</view>
		</tn-popup>
		<tn-toast ref="toast"></tn-toast>
		<view class="" style="position: absolute;left: 10000px;">
			<shareImages ref="canvas" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :shareTitle="shareTitle"
				:goodsTitle="goodsTitle" :shareImage="shareImage" :qrSize="qrSize" :qrUrl="qrUrl"
				@success="shareSuccess">
			</shareImages>
		</view>
	</view>
</template>

<script>
	import {
		shartInfo
	} from "@/util/share.js"
	import {
		getCommissionAgent,
		getCommissionAgentApply,
		getCommissionLog
	} from "@/apis/index"
	import shareImages from '@/components/hj-placard/shareImages.vue'
	export default {
		components: {
			shareImages
		},
		data() {
			return {
				show: false,
				contentDetail: {},
				showPopup: false,
				isShow: true,
				col: 4,
				listMenu: [{
						url: 'https://oss.taoding1688.com/static/uniapp/static/commission/1.png',
						title: '我的团队',
						pageUrl: '/discountPage/team/team'
					},
					{
						url: 'https://oss.taoding1688.com/static/uniapp/static/commission/2.png',
						title: '佣金明细',
						pageUrl: '/discountPage/wallet/wallet'
					},
					{
						url: 'https://oss.taoding1688.com/static/uniapp/static/commission/3.png',
						title: '分销订单',
						pageUrl: '/discountPage/order/order'
					},
					{
						url: 'https://oss.taoding1688.com/static/uniapp/static/commission/4.png',
						title: '推广商品',
						pageUrl: '/discountPage/goods/goods'
					},
					// {
					// 	url: 'https://oss.taoding1688.com/static/uniapp/static/commission/5.png',
					// 	title: '我的资料',
					// 	pageUrl: '/discountPage/apply/apply'
					// },
					{
						url: 'https://oss.taoding1688.com/static/uniapp/static/commission/6.png',
						title: '邀请海报'
					},
					{
						url: 'https://oss.taoding1688.com/static/uniapp/static/commission/7.png',
						title: '分享记录',
						pageUrl: '/discountPage/shareLog/shareLog'
					}
				],
				page: 1,
				dataList: {},
				canvasImages: '',
				canvasWidth: 375, // 宽度
				canvasHeight: 700, // 高度
				shareTitle: '我是这张图片的标题', // 分享标题
				goodsTitle: '我是这张图片的标题我是这张图片的标题我是这张图片的标', // 商品宣传标题
				shareImage: '../../static/bg.jpg', // 背景图片
				qrSize: 100, // 二维码大小
				qrUrl: '', // 生成二维码的链接
			}
		},
		computed: {
			// 兼容小程序
			gridItemWidth() {
				return 100 / this.col + '%'
			}
		},
		mounted() {
			this.agent()
			this.getStatusList()
		
		},
		onLoad() {
			let _this=this
			let res = shartInfo()
			let str=`/pages/index/index?${res.query}`
			let paths = {
				"path": str
			}
			const encodePath=encodeURIComponent(JSON.stringify(paths))
			let url =
				`https://oss.taoding1688.com/addons/shop/third.wechat/wxacode?platform=miniProgram&payload=${encodePath}`
			uni.downloadFile({
				url: url,
				success: (downloadRes) => {
					if (downloadRes.statusCode == 200) {
						_this.qrUrl = downloadRes.tempFilePath
						_this.$refs.canvas.canvasCreate(downloadRes.tempFilePath);
					}
				},
				failure: (err) => {
					console.log('下载文件失败', err);
				}
			});

		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				let ress = shartInfo()

				return {
					title: this.info.app.name,
					path: `/pages/index/index?${ress.query}`,
					imageUrl: this.info.app.cdnurl + this.info.platform.share.forwardInfo.image,
				};
			}
		},
		methods: {
			// 生成分享图片
			createsShareImage() {
				if (this.canvasImages) {
					uni.previewImage({
						urls: [this.canvasImages],
					});
				} else {
					uni.showToast({
						title: '请稍后再试...',
						icon: 'none'
					})
				}

				this.show = false
			},
			// 预览图片
			// 回调图片地址
			shareSuccess(e) {
				this.canvasImages = e
			},
			timeDescription(str) {
				const inputDate = new Date(str);
				const currentDate = new Date();
				const diffInMilliseconds = currentDate - inputDate;

				const secondsAgo = Math.floor(diffInMilliseconds / 1000);
				if (secondsAgo < 60) {
					return '刚刚';
				}

				const minutesAgo = Math.floor(secondsAgo / 60);
				if (minutesAgo < 60) {
					return `${minutesAgo}分钟前`;
				}

				const hoursAgo = Math.floor(minutesAgo / 60);
				if (hoursAgo < 24) {
					return `${hoursAgo}小时前`;
				}

				const daysAgo = Math.floor(hoursAgo / 24);
				return `${daysAgo}天前`;
			},
			onShareByForward() {
				let res = shartInfo()

				// #ifdef APP
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: res.link,
					title: this.info.app.name,
					summary: this.info.app.copyright,
					imageUrl: this.info.app.cdnurl + this.info.platform.share.forwardInfo.image,
					success: (res) => {},
					fail: (err) => {},
				});
				// #endif





			},
			getStatusList() {
				getCommissionLog(this.page).then(res => {
					if (res.code == 1) {
						this.dataList = res.data
					}
				})
			},
			agent() {
				getCommissionAgent().then(res => {
					if (res.code == 1) {
						this && this.$tn.vuex('agents', res.data);
						if (res.data.status == "normal") {
							this.showPopup = false
							this.contentDetail = res.data
						} else {
							this.showPopup = false
						}
					}
				})
			},
			copy() {
				this.show = false
				let res = shartInfo()
				// #ifndef H5
				uni.setClipboardData({
					data: res.link,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					},
				});
				// #endif
				// #ifdef H5
				var createInput = document.createElement('textarea');
				createInput.value = res.link;
				document.body.appendChild(createInput);
				createInput.select();
				document.execCommand('Copy');
				createInput.className = 'createInput';
				createInput.style.display = 'none';
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
				// #endif





			},
			goTo(item) {
				if (item.title == '邀请海报') {
					this.show = true
					return
				}


				uni.navigateTo({
					url: item.pageUrl
				})
			},
			perfect() {
				uni.navigateTo({
					url: '/discountPage/apply/apply'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			commission() {
				uni.navigateTo({
					url: '/discountPage/wallet/wallet'
				})
			},
			recharge() {
				// this.tui.href('/pages/my/recharge/recharge')
				uni.navigateTo({
					url: '/templatePage/recharge/recharge'
				})
			},
			toggle() {
				this.isShow = !this.isShow
			},
			records() {
				// this.tui.href('/pages/my/records/records')
				uni.navigateTo({
					url: '/templatePage/records/records'
				})
			},
			bankCard() {
				this.tui.href('/pages/my/bankCard/bankCard')
			},
			coupon() {
				this.tui.href('/pages/my/myCoupon/myCoupon')
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/templatePage/records/records'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background: url('https://oss.taoding1688.com/static/uniapp/static/title1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.tui-wallet__box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.container {
		padding-bottom: 48rpx;
		background: #f2f2f2;
		min-height: 100vh;
	}

	.tui-wallet__box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-content__box {
		width: 100%;
		/* height: 360rpx; */
		border-radius: 15rpx;
		/* padding: 20rpx 0; */
		/* padding: 0 30rpx 50rpx 30rpx; */
		box-sizing: border-box;
		background: #fff;
		position: relative;
		box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.2);
	}

	.tui-my__assets {
		/* width: 100%; */
		color: #a17545;
		font-size: 30rpx;
		font-weight: bold;
		padding: 20rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;

	}

	.tui-my__assets image {
		width: 36rpx;
		height: 28rpx;
		margin-left: 16rpx;
		display: block;
	}

	.tui-assets__center,
	.tui-assets__bottom {
		width: 100%;
		padding: 50rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.tui-item__box {
		width: 33.3333%;
		text-align: center;
		color: #cba67e;
		font-size: 26rpx;
		flex-shrink: 0;
	}

	.tui-text__large {
		font-size: 34rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.tui-assets__bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		padding-top: 16rpx;
		box-shadow: 0px -5px 10px -5px rgba(255, 255, 255, .3);
	}

	.tui-assets__bottom .tui-item__box {
		width: 25%;
		font-size: 24rpx;
		padding-bottom: 16rpx;
		opacity: 0.8;
	}

	.tui-assets__bottom .tui-text__large {
		font-size: 32rpx;
	}

	.tui-recharge__box {
		width: 100%;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		border-radius: 24rpx;
		background-color: #fff;
	}

	.tui-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
		padding-bottom: 20rpx;
	}

	.tui-list-cell {
		width: 100%;
		height: 160rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #FFF0F1;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.tui-amount__title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.tui-amount__desc {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.tui-amount__box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-amount {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		text-align: center;
		min-width: 142rpx;
		margin-left: auto;
	}

	.tui-badge {
		height: 32rpx;
		border-radius: 10rpx 0;
		font-size: 25rpx;
		font-weight: 400;
		color: #FFFFFF;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-bg__new {
		background-color: #1BABA1;
	}

	.tui-bg__appoint {
		background: #F51414;
	}

	.tui-bg__old {
		background: #FA5A0A;
	}

	.tui-scale__text {
		width: 100%;
		text-align: center;
		transform: scale(0.8);
		transform-origin: center center;
	}

	/* #ifdef MP */
	.tui-tag__box {
		position: absolute;
		right: 0;
		top: 30rpx;
		border: 1rpx solid #fff;
		border-right: 0 !important;
		color: #fff;
		font-size: 24rpx;
		border-radius: 100rpx 0 0 100rpx;
		padding: 4rpx 16rpx;
		text-align: center;
	}

	/* #endif */
</style>